<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="申请编号">
          <el-input v-model="queryParams.applyCode" placeholder="请输入申请编号" clearable @keyup.enter="handleQuery"/>
        </el-form-item>

        <el-form-item label="老人姓名">
          <el-input v-model="queryParams.applyName" placeholder="请输入老人姓名" clearable @keyup.enter="handleQuery"/>
        </el-form-item>

        <el-form-item label="改造状态">
          <el-select v-model="queryParams.remodelStatus" clearable placeholder="请选择改造状态" style="width: 240px">
            <el-option v-for="dict in retrofit_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="postList" stripe border max-height="500">
        <el-table-column label="申请编号" align="center" prop="applyCode"  width="200" />
        <el-table-column label="老人姓名" align="center" prop="applyName" width="100" />
        <el-table-column label="性别" align="center" width="100" >
          <template #default="scope">
            <span>
               {{sys_user_sex.find(item=>item.value==scope.row.sex)? sys_user_sex.find(item=>item.value==scope.row.sex).label:''}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="年龄" align="center" prop="age"   width="100" />
        <el-table-column label="家庭住址" align="center" prop="address"  width="500"/>
        <el-table-column label="改造状态" align="center" >
          <template #default="scope">
            <span>
               {{remodel_status.find(item=>item.value==scope.row.remodelStatus)? remodel_status.find(item=>item.value==scope.row.remodelStatus).label:''}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="改造完成时间" align="center" prop="remodelFinishTime" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="280">
          <template #default="scope">
            <el-button link type="primary"  v-if="scope.row.remodelStatus!='1'" @click="apply(scope.row,0)">适老化改造</el-button>
            <el-button link type="primary"  @click="apply(scope.row,2)">查看</el-button>
            <el-button link type="primary"  v-if="scope.row.remodelStatus!='1'" @click="apply(scope.row,1)">改造完成</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.limit" @pagination="getList"/>
    </el-card>

    <!-- 添加或修改岗位对话框 -->
  </div>
</template>

<script setup name="ageReform">
  import { useRouter } from 'vue-router'

  const { proxy } = getCurrentInstance();

  const router=useRouter()

  const { sys_normal_disable, sys_user_sex,remodel_status,retrofit_status} = proxy.useDict(
      "sys_normal_disable",
      "sys_user_sex",
      "remodel_status",
      "retrofit_status"

  );
  import {
    elderlyOrientedRemodel
  } from "@/api/AgeAppropriate/index";

  const showSearch = ref(true);
  const loading = ref(true);
  const postList = ref([]);
  const open = ref(false);
  const title = ref("新增服务项目");

  const total = ref(0);

  const data = reactive({
    form: {},
    queryParams: {
      page: 1,
      limit: 10,
      applyCode: undefined,
      applyName:undefined,
      remodelStatus:undefined
    },
    rules: {

    },
  });

  const { queryParams, form, rules } = toRefs(data);

  function cancel() {
    open.value = false;
    reset();
  }

  function edit(data) {
    form.value = data;
    title.value = "编辑服务项目";
    open.value = true;
  }

  function apply(data,status){
    router.push({
      name:`ageReformApply`,
      params:{
        id:data.id,
        status:data.remodelStatus,
        showStatus:status
      }
    })
  }

  /** 查询岗位列表 */
  function getList() {
    loading.value = true;
    elderlyOrientedRemodel(queryParams.value).then((response) => {
      postList.value = response.page.list;
      total.value = response.page.totalCount;
      loading.value = false;
    });
  }

  function handleQuery() {
    getList();
  }

  function resetQuery() {
    queryParams.value = {
      page: 1,
      limit: 10,
      applyCode: undefined,
      applyName:undefined,
      remodelStatus:undefined
    };
    getList();
  }

  getList();
</script>
